<template>
	<div class="container">
		<search-date @getChangeTime="getChangeTime" :initTimeDatas="initTimeDatas"></search-date>
		<Department @getdepartcode="getDepartCode"></Department>

		<el-table :data="tableData" stripe fit ref="table" show-summary :span-method="objectSpanMethod">
			<el-table-column prop="district" label="所属类型" align="left" width="150" />
			<el-table-column prop="org_name" label="医疗机构" align="left" width="150px" />
			<el-table-column prop="no_id_crad_cnt" label="身份证号" align="left" width="120" />
			<el-table-column prop="no_phone_cnt" label="电话号" align="left" width="80" />
			<el-table-column prop="no_accession_number_cnt" label="检查号" align="left" width="80" />
			<el-table-column prop="no_report_time_cnt" label="报告时间" align="left" />
			<el-table-column prop="no_sight_cnt" label="检查所见" align="left" />
			<el-table-column prop="no_request_dept_cnt" label="申请科室" align="left" />
			<el-table-column prop="no_birth_date_cnt" label="出生日期" align="left" />
			<el-table-column prop="no_report_doctor_cnt" label="报告医生" align="left" />
			<el-table-column prop="no_audit_time_cnt" label="审核时间" align="left" />
			<el-table-column prop="no_audit_doctor_cnt" label="审核医生" align="left" />
			<el-table-column prop="no_technician_name_cnt" label="检查医生" align="left" />
			<el-table-column prop="no_examine_item_cnt" label="检查项目" align="left" />
			<!-- <el-table-column prop="sum" label="总计" align="left"></el-table-column> -->

		</el-table>
	</div>
</template>
<script>
import searchDate from '@/components/common/searchDate'
import Department from '@/components/common/Department'
import { get_data_quality } from '@/api/admin'
import { clone, compareArray, objSum } from '@/utils/base.js'

export default {
	name: 'tableCom',
	components: { searchDate, Department },
	data () {
		return {
			listQuery: {
				pagesize: 10,
				pageindex: 1,
				depart_code: null,
				start_date: null,
				end_date: null,
			},
			initTimeDatas: [
				{
					text: '总计',
					code: 'allTime',
				},
				{
					text: '最近半年',
					code: 'lastHalfYear',
				},
				{
					text: '最近一年',
					code: 'lastOneYear',
				},
			],
			tableData: [],
			rowIndex: '-1',
			OrderIndexArr: [],
			hoverOrderArr: []
		}
	},
	methods: {
		getList () {
			get_data_quality( this.listQuery ).then( res => {
				if ( res.code === 0 ) {
					let data = clone( res.data ),
						_data = []
					data.map( item => {
						let obj = {}
						let list = item.detail_list
						list.map( ite => {
							// 行数据求和 todo
							for ( const key in ite ) {
								let sum = null
								if ( typeof ( ite[ key ] ) === 'number' ) {
									// 行数据求和
									sum = sum + ite[ key ]
								}
								// console.log( sum );
								ite.sum = sum
							}
							obj = Object.assign( {
								district: item.district,
								district_code: item.district_code,
								sum: ite.sum
							}, ite )
							_data.push( obj )
						} )
						// console.log( obj )
						// console.log( '111' )

					} )
					let res_data = _data.sort( compareArray( 'district' ) )
					this.tableData = res_data
					this.getOrderNumber()
				}
				// todo洗数据
			} )
		},
		getChangeTime ( val ) {
			console.log( val );
			this.listQuery = Object.assign( this.listQuery, val )
			this.getList()
		},
		getDepartCode ( val ) {
			this.listQuery.depart_code = val
			this.getList()
		},
		//表格合并
		getOrderNumber () {
			console.log( '>>>>>>>>>>>>>>>>' );
			let OrderObj = {}
			this.tableData.forEach( ( element, index ) => {
				element.rowIndex = index
				if ( OrderObj[ element.district_code ] ) {
					OrderObj[ element.district_code ].push( index )
				} else {
					OrderObj[ element.district_code ] = []
					OrderObj[ element.district_code ].push( index )
				}
			} )

			// 将数组长度大于1的值 存储到this.OrderIndexArr（也就是需要合并的项）
			for ( let k in OrderObj ) {
				if ( OrderObj[ k ].length > 1 ) {
					this.OrderIndexArr.push( OrderObj[ k ] )
				}
			}
		},


		// 合并单元格
		objectSpanMethod ( {
			row,
			column,
			rowIndex,
			columnIndex
		} ) {
			if ( columnIndex === 0 ) {
				for ( let i = 0; i < this.OrderIndexArr.length; i++ ) {
					let element = this.OrderIndexArr[ i ]
					for ( let j = 0; j < element.length; j++ ) {
						let item = element[ j ]
						if ( rowIndex == item ) {
							if ( j == 0 ) {
								return {
									rowspan: element.length,
									colspan: 1
								}
							} else if ( j != 0 ) {
								return {
									rowspan: 0,
									colspan: 0
								}
							}
						}
					}
				}
			}
		},


		tableRowClassName ( {
			row,
			rowIndex
		} ) {
			let arr = this.hoverOrderArr
			for ( let i = 0; i < arr.length; i++ ) {
				if ( rowIndex == arr[ i ] ) {
					return 'hovered-row'
				}
			}
		},


		cellMouseEnter ( row, column, cell, event ) {
			this.rowIndex = row.rowIndex;
			this.hoverOrderArr = [];
			this.OrderIndexArr.forEach( element => {
				if ( element.indexOf( this.rowIndex ) >= 0 ) {
					this.hoverOrderArr = element
				}
			} )
		},

		cellMouseLeave ( row, column, cell, event ) {
			this.rowIndex = '-1'
			this.hoverOrderArr = [];
		}
	},
	created () {
		this.$nextTick( () => {
			this.getList()
			this.getOrderNumber()
		} )
	},
	mounted () {
		console.log( this.tableData );
	}
}
</script>
<style lang="less" scoped>
.container {
	padding-left: 20px;
	h1 {
		margin: 20px 0;
		font-size: 18px;
		color: #333;
		font-weight: 500;
	}
	.title {
		height: 40px;
		line-height: 40px;
		margin-bottom: 20px;
	}
	.two {
		// width: 22%;
		height: 40px;
		padding: 0px 15px 0 0;
		margin-left: -30px;
		background-image: url('~@/assets/imgs/juxing.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		color: #ef8900;
		line-height: 40px;
		text-indent: 20px;
		display: inline-block;
	}
}
</style>
